<template>
  <div class="editor-container">
    <div class="note-title">
      <el-card shadow="hover">
        <el-text size="large">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="保存笔记，使用 Ctrl + S 快捷键保存"
                placement="top">
                <el-link :icon="MessageBox" @click="handleSaveContent">&nbsp;{{ mdEditorForm?.name }}</el-link>
            </el-tooltip>
        </el-text>
      </el-card>
    </div>
    <div class="editor-wrapper">
      <div id="contentVditor" class="vditor"></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="EditorMd">
import { onMounted, onBeforeUnmount } from 'vue';
import { MessageBox } from '@element-plus/icons-vue'
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import { getToken } from '@/utils/auth';
import useEditorStore from '@/store/modules/editor'
import { NotesForm } from '@/api/notes/notes/types';
import { getNotes } from '@/api/notes/notes'

const editorStore = useEditorStore();

const saveSvg = '<svg t="1730727447491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22467" width="256" height="256"><path d="M511.99992 511.99992m-511.99992 0a511.99992 511.99992 0 1 0 1023.99984 0 511.99992 511.99992 0 1 0-1023.99984 0Z" fill="#E16B5A" p-id="22468"></path><path d="M963.647849 753.223882c-0.584-1.648-1.296-3.239999-1.967999-4.855999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.271999-1.984-4.903999-0.584-1.68-1.312-3.295999-1.991999-4.936-0.576-1.656-1.304-3.255999-1.976-4.879999-0.584-1.672-1.304-3.279999-1.976-4.911999-0.592-1.672-1.312-3.271999-1.983999-4.903999-0.592-1.68-1.312-3.295999-2-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.983999-4.911999-0.592-1.696-1.328-3.327999-2.016-4.983999-0.576-1.64-1.296-3.223999-1.968-4.831999-0.576-1.68-1.312-3.295999-1.984-4.936-0.584-1.656-1.312-3.255999-1.983999-4.871999-0.576-1.672-1.296-3.279999-1.984-4.911999-0.576-1.672-1.296-3.279999-1.984-4.911999-0.576-1.68-1.304-3.295999-1.983999-4.936-0.584-1.656-1.304-3.255999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.68-1.312-3.295999-1.992-4.936-0.584-1.656-1.304-3.247999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.984-4.912-0.584-1.68-1.312-3.287999-1.992-4.927999-0.576-1.656-1.296-3.255999-1.975999-4.879999-0.584-1.672-1.304-3.279999-1.976-4.911999-0.592-1.672-1.312-3.279999-1.984-4.903999-0.592-1.68-1.312-3.295999-1.999999-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.271999-1.983999-4.903999-0.584-1.68-1.312-3.295999-2-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.696-1.328-3.335999-2.015999-4.991999-0.576-1.64-1.296-3.223999-1.968-4.831999-0.576-1.672-1.296-3.279999-1.984-4.912-0.576-1.68-1.304-3.295999-1.983999-4.935999-0.584-1.656-1.304-3.255999-1.976-4.871999-0.584-1.68-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.68-1.312-3.295999-1.991999-4.936-0.584-1.656-1.304-3.255999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.68-1.312-3.295999-1.992-4.936-0.576-1.656-1.304-3.255999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.975999-4.911999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.279999-1.984-4.912-0.592-1.68-1.312-3.287999-1.999999-4.927999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.584-1.672-1.312-3.279999-1.984-4.912-0.584-1.68-1.312-3.287999-1.999999-4.927999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.903999-0.584-1.688-1.312-3.295999-1.992-4.936-0.592-1.68-1.32-3.311999-2.008-4.959999-0.576-1.64-1.296-3.223999-1.959999-4.831999-0.584-1.672-1.304-3.279999-1.984-4.903999-0.584-1.672-1.304-3.279999-1.984-4.912-0.584-1.68-1.312-3.295999-1.991999-4.935999-0.584-1.656-1.304-3.255999-1.976-4.879999-0.584-1.672-1.304-3.271999-1.984-4.903999-0.584-1.672-1.304-3.279999-1.983999-4.912-0.584-1.68-1.312-3.295999-1.992-4.935999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.271999-1.984-4.903999-0.592-1.672-1.312-3.279999-1.983999-4.911999-0.592-1.68-1.312-3.295999-2-4.936-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.271999-1.983999-4.903999-0.584-1.672-1.312-3.279999-1.984-4.911999-0.584-1.672-1.312-3.279999-1.984-4.912-0.584-1.68-1.312-3.295999-1.999999-4.935999-0.576-1.656-1.296-3.247999-1.968-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.912-0.584-1.68-1.312-3.295999-1.992-4.935999-0.584-1.648-1.304-3.247999-1.976-4.871999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.672-1.304-3.279999-1.983999-4.912a98.863985 98.863985 0 0 0-3.376-8.343998c-0.184-0.496-0.408-0.984-0.6-1.48-0.584-1.672-1.304-3.279999-1.983999-4.911999-0.584-1.672-1.304-3.279999-1.984-4.911999-0.584-1.68-1.312-3.287999-1.992-4.928-0.576-1.656-1.296-3.255999-1.967999-4.879999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.279999-1.984-4.911999-0.592-1.672-1.312-3.271999-1.983999-4.904-0.592-1.68-1.312-3.295999-2-4.935999-0.576-1.656-1.296-3.255999-1.968-4.879999-0.592-1.672-1.312-3.279999-1.984-4.903999C757.375882 237.583963 717.967888 207.999968 675.999894 207.999968h-327.999948c-2.688 0-5.359999 0.16-8.015999 0.399999-0.936 0.088-1.864 0.208-2.8 0.32a108.607983 108.607983 0 0 0-8.367998 1.384c-1.6 0.344-3.192 0.76-4.784 1.176-1.008 0.264-2.016 0.504-3.007999 0.8l-0.064 0.016v0.008c-36.647994 11.111998-66.81599 43.615993-72.375989 81.919987l-56.527991 367.567943A87.495986 87.495986 0 0 0 187.991971 687.999893v39.999993c0 12.751998 2.792 24.839996 7.687998 35.799995 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.904 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.991999 4.935999 0.624 1.648 1.256 3.279999 1.976 4.872 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.656 1.264 3.303999 1.983999 4.911999 0.632 1.688 1.288 3.367999 2.032 5.007999 0.608 1.624 1.24 3.231999 1.944 4.815999 0.624 1.656 1.264 3.303999 1.983999 4.912 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.271999 1.975999 4.871999 0.624 1.656 1.264 3.303999 1.984 4.912 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.927999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.912 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.656 1.264 3.303999 1.983999 4.903999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.976 4.879999 0.624 1.656 1.264 3.303999 1.983999 4.912 0.624 1.648 1.264 3.303999 1.984 4.903999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.904 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.624 1.648 1.256 3.279999 1.975999 4.879999 0.624 1.656 1.264 3.303999 1.984 4.904 0.624 1.656 1.264 3.303999 1.984 4.911999 0.632 1.68 1.28 3.351999 2.015999 4.983999 0.616 1.64 1.256 3.271999 1.968 4.863999 0.624 1.648 1.256 3.279999 1.976 4.872 0.624 1.656 1.264 3.303999 1.983999 4.911999 0.624 1.656 1.264 3.303999 1.984 4.911999 0.624 1.664 1.272 3.319999 1.992 4.935999 0.264 0.704 0.568 1.384 0.84 2.08A508.007921 508.007921 0 0 0 511.99992 1023.99984c195.527969 0 365.407943-109.647983 451.647929-270.775958z" fill="#D16354" p-id="22469"></path><path d="M823.999871 719.999888H191.99997a7.991999 7.991999 0 0 1-6.047999-2.768C184.431971 715.487888 183.999971 703.99989 183.999971 687.999893l60.591991-393.975939C251.479961 246.591961 296.071954 207.999968 343.999946 207.999968h327.999949c47.927993 0 92.511986 38.591994 99.407984 86.023986L831.99987 687.999893c0 7.999999-0.44 27.487996-1.952 29.231995A7.991999 7.991999 0 0 1 823.999871 719.999888z" fill="#406A80" p-id="22470"></path><path d="M771.407879 294.023954C764.511881 246.591961 719.927888 207.999968 671.999895 207.999968h-23.999996c47.927993 0 92.511986 38.591994 99.407984 86.023986L807.999874 687.999893c0 7.999999-0.44 27.487996-1.952 29.231995A7.991999 7.991999 0 0 1 799.999875 719.999888h23.999996c2.32 0 4.527999-1.008 6.047999-2.768 1.512-1.744 1.952-21.231997 1.952-29.231995l-60.591991-393.975939z" fill="#325366" p-id="22471"></path><path d="M743.999884 815.999873H271.999958c-48.519992 0-87.999986-39.479994-87.999987-87.999987v-39.999993c0-48.519992 39.479994-87.999986 87.999987-87.999987h471.999926c48.511992 0 87.999986 39.479994 87.999986 87.999987v39.999993c0 48.519992-39.487994 87.999986-87.999986 87.999987z" fill="#325366" p-id="22472"></path><path d="M271.999958 799.999875c-39.703994 0-71.999989-32.295995-71.999989-71.999989v-39.999993c0-39.703994 32.295995-71.999989 71.999989-71.999989h471.999926c39.703994 0 71.999989 32.295995 71.999989 71.999989v39.999993c0 39.703994-32.295995 71.999989-71.999989 71.999989H271.999958z" fill="#406A80" p-id="22473"></path><path d="M690.671892 707.999889m-39.999994 0a39.999994 39.999994 0 1 0 79.999988 0 39.999994 39.999994 0 1 0-79.999988 0Z" fill="#F5F5F5" p-id="22474"></path><path d="M690.671892 707.999889m-23.999996 0a23.999996 23.999996 0 1 0 47.999992 0 23.999996 23.999996 0 1 0-47.999992 0Z" fill="#406A80" p-id="22475"></path><path d="M623.999903 509.33592A18.719997 18.719997 0 0 1 605.335905 527.999918H418.663935A18.719997 18.719997 0 0 1 399.999938 509.33592V322.66395A18.719997 18.719997 0 0 1 418.663935 303.999953h186.67197A18.719997 18.719997 0 0 1 623.999903 322.66395v186.67197z" fill="#E16B5A" p-id="22476"></path><path d="M431.111933 303.999953h161.775974v80.887987H431.111933z" fill="#F5F5F5" p-id="22477"></path><path d="M536.887916 316.447951H567.999911v55.999991h-31.111995z" fill="#E16B5A" p-id="22478"></path><path d="M437.335932 434.663932h149.327976V527.999918H437.335932z" fill="#E6E6E6" p-id="22479"></path><path d="M561.783912 465.783927H462.223928a6.215999 6.215999 0 0 1 0-12.431998h99.559984a6.215999 6.215999 0 1 1 0 12.431998zM561.783912 496.887922H462.223928a6.215999 6.215999 0 0 1 0-12.439998h99.559984a6.215999 6.215999 0 0 1 0 12.439998z" fill="#CCCCCC" p-id="22480"></path></svg>'

const loading = ref()
const vditor = ref<Vditor>();
const mdEditorForm = ref<NotesForm>();

const handleSaveContent = async () => {
    const md = vditor.value.getValue();
    mdEditorForm.value.content = md
    editorStore.mdEditorForm = mdEditorForm.value
    editorStore.handleSaveContent()
}

const handlLoading =() => {
  loading.value = ElLoading.service({
      target: '.editor-container',
      lock: true,
      text: '加载中。。。',
  })
}

const saveBtn = {
  hotkey: '⌘S',
  name: 'save-md',
  tipPosition: 's',
  tip: '保存笔记',
  className: 'save-btn',
  icon: saveSvg,
  click: handleSaveContent,
}

// 编辑器配置项
const options:IOptions = {
  height: '100%',
  mode: 'ir',
  theme: 'classic',
  lang: 'zh_CN',
  toolbar: [
    saveBtn,
    "|",
    'emoji',
    'headings',
    'bold',
    'italic',
    'strike',
    'link',
    '|',
    'list',
    'ordered-list',
    'check',
    'outdent',
    'indent',
    '|',
    'quote',
    'line',
    'code',
    'inline-code',
    'insert-before',
    'insert-after',
    '|',
    'upload',
    'table',
    '|',
    'undo',
    'redo',
    '|',
    'fullscreen',
    'preview',
    'outline',
    "edit-mode",
    'export',
  ],
  "outline": {
    "enable": true,
    "position": "right"
  },
  cache: {
    enable: false
  },
  input (md) {
    editorStore.hasSave = true
  },
  blur (md) {
    if(mdEditorForm.value !=null) {
        mdEditorForm.value.content = md
        editorStore.mdEditorForm = mdEditorForm.value
    }
  },
  upload: {
      accept: 'image/*,.mp3, .mp4, .rar, .zip',
      headers: {
          "Authorization": 'Bearer ' + getToken(),
          "clientid": import.meta.env.VITE_APP_CLIENT_ID
      },
      url: import.meta.env.VITE_APP_BASE_API + '/basics/base/file',
      linkToImgUrl: import.meta.env.VITE_APP_BASE_API + '/basics/base/file',
      filename (name) {
          return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
          replace('/\\s/g', '')
      },
      linkToImgCallback(responseText: string) {
          console.log(responseText, "linkToImgCallback====")
      },
      linkToImgFormat(responseText: string): string {
          const resJson = JSON.parse(responseText)

          const respJson = {
              msg: resJson.msg,
              code: 0,
              data: {
                  originalURL: '',
                  url: resJson.data.url
              }
          }

          return JSON.stringify(respJson)
      },
      format(files: File[], responseText: string): string {
          const resJson = JSON.parse(responseText)

          const msg = resJson.msg;
          const code = resJson.code;

          const respJson = {
              msg: msg,
              code: 0,
              data: {
                  errFiles: [],
                  succMap: {
                      [files[0].name]: resJson.data?.url
                  }
              }
          }
          
          if (code !== 200) {
            // 上传失败
            // vditor.value.tip(msg, 50000);
            ElMessage.error(msg)
            respJson.code = code;
            return JSON.stringify(respJson);
          }

          return JSON.stringify(respJson)
      },
      error(msg: string) {
          ElMessage.error(msg)
      }
  },
  after: () => {
    // 编辑器初始化完成后的回调
    vditor.value?.focus();
  }
};

const initEditor = () => {
  vditor.value = new Vditor('contentVditor', options);
};

const notesInfo = async (id: string) => {
    handlLoading()
    let res = await getNotes(id)
    mdEditorForm.value = res.data
    let content =  ""
    if(res.data != null && res.data.content != null) {
        content = res.data.content
    }
    vditor.value.setValue(content)
    loading.value.close()
}

// 导出方法
defineExpose({ notesInfo })

// 初始化编辑器
onMounted(() => {
  initEditor();
});

// 组件销毁前清理编辑器实例
onBeforeUnmount(() => {
  vditor.value?.destroy();
});
</script>

<style scoped lang="scss">
.editor-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  background: #fff;
  border-radius: 4px;

  .note-title {
    flex: none;
    margin-bottom: 12px;
  }

  .editor-wrapper {
    flex: 1;
    overflow: hidden;
  }

  .vditor {
    height: 100%;
  }
}
</style>